<template>
  <div class="menu_left cflex" :style="{width:sidebar.width+'px'}" id="leftMenu">
    <div class="menu_page_top rflex">
      <img :class='["logo",{"closeLogo":!sidebar.opened}]' :src="logo" alt="admin">
      <div class="user_info" v-show="sidebar.opened">
        <p class="name" v-if="userInfo">姓名：{{userName}}</p>
        <p class="no" v-if="userInfo">工号：{{userInfo.account}}</p>
      </div>
      <span @click="handleLefeMenu">
                <i class="el-icon-s-fold i_icon" v-show="!sidebar.opened"></i>
                <i class="el-icon-s-unfold i_icon" v-show="sidebar.opened"></i>
      </span>
    </div>
    <div class="menu_page_bottom is-scroll-left">

      <el-menu
        mode="vertical"
        theme="dark"
        @select="handleselect"
        :show-timeout="200"
        :default-active="activeIndex"
        :background-color="menuObj.bgColor"
        :text-color="menuObj.textColor"
        :active-text-color="menuObj.activeTextColor"
        :collapse="isCollapse"
        :style="{width:sidebar.width+'px'}"
      >
        <el-menu-item index="home" @click="$router.push({ name: 'home' })" class="dropItem">
          <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">首页</span>
        </el-menu-item>
        <sub-menu
          v-for="menu in menuList"
          :key="menu.menuId"
          :menu="menu"
          :dynamicMenuRoutes="dynamicMenuRoutes">
        </sub-menu>
      </el-menu>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import logoImg from "@/assets/img/avatar-3.png";
  import SubMenu from "./sub-menu";
  export default {
    name: "left-Menu",
    components: {SubMenu},
    inject: ['isReload'],  // 注入重载的功能（注入依赖）
    data() {
      return {
        menuObj: {
          bgColor: '#f9f9f9',
          textColor: '#606266',
          activeTextColor: '#f76767',
        },
        logo: logoImg,
        activeIndex: '1',
        userInfo: {},
        dynamicMenuRoutes: []

      };
    },
    comments:{
      SubMenu
    },
    computed: {
      ...mapGetters([
        'isCollapse',
        'sidebar',
      ]),
      menuList: {
        get () { return this.$store.state.common.menuList },
        set (val) { this.$store.commit('common/updateMenuList', val) }
      },
        userName: {
            get () { return this.$store.state.user.name }
        },
    },
    mounted() {

    },
    methods: {
      /**
       * 折叠菜单
       */
      handleLefeMenu() {
        this.$store.dispatch('setLeftCollapse');  // 折叠菜单
        this.$store.dispatch('handleLeftMenu');  // 改变菜单宽度 250->55
      },

      // 根据接口返回的菜单动态生成左侧导航数据
      generateRoute(data, sys) {

      },
      // 解析后台菜单
      resloveMenu(data) {

      },
      handleselect: function (a, b) {
       // this.isReload()  // 点击侧边栏重新载入页面
      },
    },
    updated() {
    },
    created() {
      this.userInfo = {chinesename: "LLL", account: "CHN0000000001"};
      this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
        // console.log(this.menuList)
      this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
    }
  };
</script>


<style lang="less" scoped>
  @left-bgColor: #eeeeee; // 左侧菜单背景颜色;
  @icon-link: #FF6C60;
  .menu_left {
    position: absolute;
    top: 80px;
    left: 0;
    // bottom:0;
    bottom: 40px; //2020-04-01
  }

  .menu_page_top {
    width: 100%;
    height: 80px;
    align-items: center;
    justify-content: space-around;
    // text-transform: uppercase;
    box-sizing: border-box;
    // padding: 0 20px;
    background: #e5e5e5;

    .logo {
      height: 44px;
      width: 44px;
      vertical-align: middle;
      display: inline-block;
      border-radius: 50%;
    }

    .closeLogo {
      width: 18px;
      height: 18px;
    }

    .title {
      font-size: 22px;

      i {
        color: #FF6C60;
      }
    }

    .user_info {
      // margin-left: 10px;
      .name {
        height: 22px;
        line-height: 22px;
        font-size: 14px;
        color: #606266;
      }

      .no {
        line-height: 22px;
        height: 22px;
        font-size: 12px;
        color: #999999;
        // background: rgba(230, 224, 224, 0.5)
      }
    }

    .i_icon {
      font-size: 20px;
      color: #b9b9b9;
      cursor: pointer;
    }
  }

  .menu_page_bottom {
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    flex: 1;
    //   margin-top:3px;
    z-index: 10;
    background: #eeeeee;
    //   .is-opened{
    //       border-bottom: 1px solid #e1e1e1;
    //   }
    .el-submenu .el-menu-item {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    li.el-menu-item:hover {
      // color: #333!important;
      background-color: #e1e1e1 !important;
    }

    .el-menu-item.is-active {
      background-color: #fff !important;
    }

    .router-link-active li.el-menu-item {
      background-color: #fff !important;
    }

    ul.el-menu a li.el-menu-item {
      border-bottom: 1px solid #e1e1e1 !important;
    }

    ul.el-menu li.el-submenu ul.el-menu a li.el-menu-item.is-active {
      background-color: #e1e1e1 !important;
      color: #606266 !important;
    }

    ul.el-menu a li.el-menu-item.is-active .el-submenu__title {
      color: #f76767 !important;
    }

    ul.el-menu li.el-submenu ul.el-menu li.el-submenu ul.el-menu a li.el-menu-item.is-active {
      background-color: #e1e1e1 !important;
      color: #606266 !important;
    }

    li.twoSubmenu.is-opened ul li {
      background-color: #fff !important;
    }

    li.is-opened ul.el-menu li.threeSubmenu.is-opened ul li {
      background-color: #fff !important;
    }

    li.is-opened ul.el-menu li.threeSubmenu.is-opened ul li:hover, li.twoSubmenu.is-opened ul li:hover {
      background-color: #e1e1e1 !important;
    }


    //   ul.el-menu li.el-submenu ul.el-menu a li.el-menu-item{
    //       border-bottom: none!important;
    //   }

    ul.el-menu li.el-submenu ul.el-menu li.el-submenu ul.el-menu a li.el-menu-item {
      border-bottom: none !important;
    }

    ul.el-menu li.is-opened ul.el-menu li.is-opened {
      border-bottom: 1px solid #e1e1e1;
    }

    // ,ul.el-menu li.is-active .el-submenu__title
    ul.el-menu li.el-submenu ul.el-menu li.is-active .el-submenu__title {
      span {
        color: #f76767 !important;
      }

      .svg-icon {
        color: #f76767 !important;
      }
    }

    .isCheck {
      color: #f76767 !important;
    }

    //   box-shadow: 0 0 10px 0 rgba(230, 224, 224, 0.5)
    //     .el-menu{
    //         height: auto!important;
    //         margin-bottom: 64px;
    //     }
    //     .el-menu-item{
    //         overflow: hidden;
    //         text-overflow: ellipsis;
    //         white-space: nowrap;
    //     }
    //     .el-menu-item.is-active{
    //         color: #666 !important;
    //         background-color: #e1e1e1 !important;
    //     }
    //     .el-menu-item:focus, .el-menu-item:hover{
    //         background-color: #e1e1e1!important;
    //          color: #666 !important;
    //     }
    //     .el-submenu__title:focus,.el-submenu__title:hover{
    //          background-color: #e1e1e1!important;
    //         color: #666 !important;
    //     }

  }

  //   .isCheck{
  //       color: #f76767 !important;
  //   }
</style>
<style>
  #leftMenu .el-menu-item, .el-submenu__title {
    height: 44px !important;
    line-height: 44px !important;
  }

  #leftMenu .el-submenu__title:hover {
    background-color: #e1e1e1 !important;
  }
</style>
